<template>
  <div class="new-goods" ref="aaa">
    <div class="content" ref="cont">
      <div @click="itemClick(item)" class="new-goods-item" v-for="item in newGoods" :key="item.id">
        <img :src="item.item_pic_url" alt="" />
        <div class="bottom">
          <h3>{{ item.title }}</h3>
          <p class="title">{{ item.subtitle }}</p>
          <!-- <p class="price">¥ {{ item.retail_price}}</p> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  props: {
    newGoods: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      scroll: null,
    };
  },
  methods: {
    itemClick(item) {
      let index = this.newGoods.findIndex(items => items.id == item.id)
      console.log(index)
      let id = this.newGoods[index].id
      // params 传值
      this.$router.push('/topdetail/' + id)
    }
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
.new-goods {
  // height: 244px;
  height: fit-content;
  overflow-x: scroll;
  margin: 10px 0 10px;
  background-color: #fff;
  .content {
    width: fit-content;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    // overflow-x: scroll;
    .new-goods-item {
      width:280px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin: 0 10px;
      border-radius: 5px;
      img {
        width: 100%;
        height: 155.55px;
      }
      .bottom {
        padding: 0px 20px;

        h3 {
          margin: 5px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        p {
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #949494;
        }
        .price {
          color: #f00;
        }
      }
    }
  }
}
</style>